@page "/numericrangevalidator"
@using Radzen
@using System.Text.Json
@using System.Text.Json.Serialization

<RadzenExample Name="NumericRangeValidator" Documentation="false">
<div class="row">
    <div class="col-xl-6">
        <div class="row">
            <div class="col">
                <RadzenTemplateForm TItem="Model" Data=@model Submit=@OnSubmit InvalidSubmit=@OnInvalidSubmit>
                    <RadzenFieldset Text="Bid info">
                        <div class="row" style="margin-bottom: 48px">
                            <div class="col-md-4 align-right">
                                <RadzenLabel Text="Quantity" />
                                <small style="display: block">(1-10 items)</small>
                            </div>
                            <div class="col">
                                <RadzenNumeric style="display: block" Name="Quantity" @bind-Value=@model.Quantity @oninput=@OnInput />
                                <RadzenNumericRangeValidator Component="Quantity" Min="1" Max="10" Text="Quantity should be between 1 and 10" Popup=@popup Style="position: absolute" />
                            </div>
                        </div>
                        <RadzenButton ButtonType="ButtonType.Submit" Text="Submit"></RadzenButton>
                    </RadzenFieldset>
                </RadzenTemplateForm>
            </div>
            <div class="col">
                <label>
                    Display validators as popup
                    <RadzenCheckBox @bind-Value=@popup></RadzenCheckBox>
                </label>
            </div>
        </div>
    </div>
    <div class="col-xl-6">
        <EventConsole @ref=@console />
    </div>
</div>
</RadzenExample>

@code {
    class Model
    {
        public decimal Quantity { get; set; }
    }

    bool popup;

    Model model = new Model();
    EventConsole console;

    void OnInput(ChangeEventArgs args)
    {
        Log("oninput", args.Value.ToString());
    }

    void Log(string eventName, string value)
    {
        console.Log($"{eventName}: {value}");
    }

    void OnSubmit(Model model)
    {
        Log("Submit", JsonSerializer.Serialize(model, new JsonSerializerOptions() { WriteIndented = true }));
    }

    void OnInvalidSubmit(FormInvalidSubmitEventArgs args)
    {
        Log("InvalidSubmit", JsonSerializer.Serialize(args, new JsonSerializerOptions() { WriteIndented = true }));
    }
}